<template>
    <div>
        <div class="table_list" :style="`height: calc(100% - ${total <= pageSize ? '40px' : '75px'})`">
            <el-table
                v-loading="loading"
                element-loading-background="rgb(0,0,0,.4)"
                :data="tableData"
                style="width: 100%"
                height="100%"
                highlight-current-row
                @cell-dblclick="celldblclick"
                @current-change="changeRow"
                @row-contextmenu="handleContextMenu"
                @selection-change="handleSelectionChange"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                :row-key="rowKey"
                :default-expand-all="expand"
            >
                <template v-for="item in tableColumn">
                    <el-table-column v-if="item.name === 'action' && (item?.if ?? true)" label="操作" :width="item.width">
                        <template slot-scope="scope">
                            <el-button v-for="i in item.buttons" v-if="i.if === undefined ? true : i.if(scope.row)" :key="i.text" type="text" :icon="i.icon" @click="() => i.click(scope.row)">
                                {{ i.text }}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.name === 'selection'" type="selection" width="55"></el-table-column>
                    <el-table-column v-else-if="item.items" :label="item.label" :width="item.width">
                        <el-table-column v-for="item1 in item.items" :key="item1.name" :label="item1.label" :prop="item1.name" :width="item1.width">
                            <template style="padding: 0 !important" slot-scope="scope">
                                <el-tooltip v-for="item3 in scope.row[item.name]" :key="item3._id" effect="dark" :disabled="!item3[item1.name] || item1.type === 'image'" :content="item3[item1.name]" placement="top">
                                    <div class="parent-div" id="textContainer" style="height: 30px; line-height: 30px">
                                        <el-image v-if="item1.type === 'image'" title="点击查看大图" style="height: 100%" :src="'/static' + item3[item1.name]" :preview-src-list="['/static' + item3[item1.name]]">
                                            <div slot="error">
                                                <data>暂无图片</data>
                                            </div>
                                        </el-image>
                                        <div v-else style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ item3[item1.name] | noData }}</div>
                                    </div>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column v-else-if="item.name === 'filepath' || (item.type && item.type === 'upload')" :label="item.label" :width="item.width">
                        <template slot-scope="scope">
                            <div v-if="scope.row[item.name] === 'None' || !scope.row[item.name]">暂无</div>
                            <a v-else :href="`/static/upload/${scope.row[item.name]}`" target="_blank" style="color: #007bff">{{ scope.row[item.name] }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="['处理状态', '告警等级', '是否处理', '计划状态', '巡检状态', '状态'].includes(item.label)" :label="item.label" :width="item.width">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" style="border: none; padding: 0 4px; height: 20px; line-height: 20px; font-size: 14px" :color="rgba(item.color(scope.row[item.name]))">
                                {{ item.format(scope.row[item.name]) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.name === 'photo' || (item.type && item.type === 'image')" :label="item.label" :width="item.width">
                        <template slot-scope="scope">
                            <el-image title="点击查看大图" class="image" :src="'/static' + scope.row[item.name]" :preview-src-list="['/static' + scope.row[item.name]]">
                                <div slot="error">
                                    <img class="image" src="@/assets/Device/no_img_1.png" alt />
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.type && item.type === 'images'" :label="item.label" :width="item.width">
                        <template slot-scope="scope">
                            <el-image
                                v-for="(img, index) in scope.row[item.name]"
                                :key="img"
                                title="点击查看大图"
                                style="width: 118px; margin-top: 5px"
                                :src="img"
                                :preview-src-list="scope.row[item.name]"
                                :initial-index="index"
                            >
                                <div slot="error">
                                    <img class="image" src="@/assets/Device/no_img_1.png" alt />
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.name === 'dbs'" :width="item.width" :label="item.label" type="expand">
                        <template slot-scope="props" v-if="props.row['dbs'].length !== 0">
                            <div style="display: flex; height: 35px; line-height: 35px">
                                <div style="flex: 1" v-for="item in ['数据库中表名', '表内数据总数', '最新数据更新时间']" :key="item">{{ item }}</div>
                            </div>
                            <div v-for="item in props.row['dbs']" :key="item.name" style="display: flex; height: 25px; line-height: 25px">
                                <div style="flex: 1">{{ item.name | noData }}</div>
                                <div style="flex: 1">{{ item.count | noData }}</div>
                                <div style="flex: 1">{{ item.time | noData }}</div>
                            </div>
                        </template>
                        <template slot-scope="props" v-else>
                            <div>数据库中暂无对应表</div>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.name === 'm_config'" :width="item.width" :label="item.label" type="expand">
                        <template slot-scope="props" v-if="props.row['m_config'].length !== 0">
                            <div style="display: flex; height: 35px; line-height: 35px">
                                <div style="flex: 1" v-for="item in ['参数类型', '参数值', '参数描述']" :key="item">{{ item }}</div>
                            </div>
                            <div v-for="item in props.row['m_config']" :key="item.name" style="display: flex; height: 25px; line-height: 25px">
                                <div style="flex: 1">{{ item.key | noData }}</div>
                                <div style="flex: 1">{{ item.value | noData }}</div>
                                <div style="flex: 1">{{ item.desc | noData }}</div>
                            </div>
                        </template>
                        <template slot-scope="props" v-else>
                            <div>数据库中暂无对应表</div>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.name === 'suggestCause'" :width="item.width" :label="item.label" type="expand">
                        <template slot-scope="props">
                            <div class="suggestCause">
                                <div style="margin: 0px 0 5px 0; font-size: 18px; font-weight: 600">产生原因:</div>
                                <div style="line-height: 1.2">
                                    {{ props.row['cause'] }}
                                </div>
                                <div style="margin: 10px 0 5px 0; font-size: 18px; font-weight: 600">处理建议</div>
                                <div style="line-height: 1.2">{{ props.row['suggest'] }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.type === 'obj'" :width="item.width" :label="item.label">
                        <template slot-scope="props">
                            <div v-for="item in props.row[item.name]" :key="item.test" style="display: flex; height: 25px; line-height: 25px">
                                <div style="display: flex">
                                    <div :style="`width: ${14 * (4 - item.text.length)}px`"></div>
                                    <div>{{ item.text }}：</div>
                                </div>
                                <div>{{ item.value | noData }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="item.name !== 'action'" :label="item.label" :prop="item.name" :width="item.width">
                        <template slot-scope="scope">
                            <el-tooltip :disabled="item.tooltip === undefined" effect="dark" :content="item.tooltip === undefined ? '' : item.tooltip(scope.row)" placement="top">
                                <div id="textContainer" :style="item.style !== undefined && scope.row[item.name] !== null && scope.row[item.name] !== '' ? item.style(scope.row[item.name]) : ''" v-if="item.format">
                                    {{ item.format(scope.row[item.name]) | noData }}
                                </div>
                                <div id="textContainer" :style="item.style !== undefined && scope.row[item.name] !== null && scope.row[item.name] !== '' ? item.style(scope.row[item.name]) : ''" v-else>
                                    {{ scope.row[item.name] | noData }}
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
        <div class="table_bottom" v-if="total > pageSize">
            <el-pagination
                :page-size="pageSize"
                @current-change="
                    (e) => {
                        $emit('changePage', e)
                    }
                "
                layout="total,prev,pager,next,jumper"
                :total="total"
                :current-page="currentPage"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        tableData: {
            type: Array,
            default() {
                return []
            },
        },
        tableColumn: {
            type: Array,
            default() {
                return []
            },
        },
        pageSize: {
            type: Number,
            default() {
                return 0
            },
        },
        total: {
            type: Number,
            default() {
                return 0
            },
        },
        currentPage: {
            type: Number,
            default() {
                return 1
            },
        },
        loading: {
            type: Boolean,
            default() {
                return false
            },
        },
        rowKey: {
            type: String,
            default() {
                return 'id'
            },
        },
        expand: {
            type: Boolean,
            default() {
                return false
            },
        },
    },
    methods: {
        rgba(hex) {
            if (!hex) hex = '#409eff'
            try {
                hex = hex.replace('#', '')
                if (hex.length === 3) {
                    hex = hex
                        .split('')
                        .map((x) => x + x)
                        .join('')
                }
                const r = parseInt(hex.substring(0, 2), 16)
                const g = parseInt(hex.substring(2, 4), 16)
                const b = parseInt(hex.substring(4, 6), 16)
                return `rgba(${r}, ${g}, ${b}, 0.5)`
            } catch (error) {
                console.log('error', error)
                return hex
            }
        },

        celldblclick(row, column, cell, event) {
            if (event.type === 'dblclick' && column.property) {
                // 复制文本到剪贴板
                this.$copyText(row[column.property]).then(() => {
                    this.$message.success('复制成功')
                })
            }
        },
        handleContextMenu(row, column, event) {
            event.preventDefault()
            this.$emit('handleContextMenu', row)
        },
        handleSelectionChange(val) {
            this.$emit(
                'changeID',
                val.map((item) => item.id),
            )
        },
        changeRow(row) {
            this.$emit('changeRow', row)
        },
    },
}
</script>

<style lang="less">
.suggestCause {
    width: 100%;
    padding: 10px;
    text-align: start;
}

.table_list {
    position: absolute;
    left: 3%;
    top: 20px;
    width: 94%;

    .warn_span {
        color: #f9f9f9;
        font-size: 18px;
    }

    .warn_span_1 {
        color: aqua;
    }
}

.table_bottom {
    width: 94%;
    height: 46px;
    position: absolute;
    left: 3%;
    bottom: 2px;
    display: flex;
    justify-content: center;
}

.image {
    width: 100%;
    height: 120px;
}
#textContainer {
    white-space: pre-line;
}

.parent-div {
    position: relative;
    padding: 0 !important;
}

.parent-div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* 将伪元素定位在父元素中间 */
    transform: translateX(-50%); /* 将伪元素向左移动自身宽度的一半 */
    width: calc(100% + 20px) !important; /* 伪元素的宽度比父元素更宽 */
    height: 30px;
    border-bottom: 1px solid rgb(15, 65, 131);
}

.cell {
    padding: 0;
}
</style>
